<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection">
    <title>投票</title>
    <link href="http://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
    
    <link rel="stylesheet" type="text/css" href="__CSS__/activity.css?{:rand()}"/>
    
</head>
<body>

<div class="container" id="container">
    
    <div class="weui-tab">
        <div class="weui-tab__panel">
            <div id="page_1">
                <div class="banner">
                    <img class="banner" src="__IMG__/banner_01.jpg">
                </div>
                <div class="weui-panel__hd">
                    <div class="page__bd">
                        <!--<a href="javascript:;" class="weui-btn weui-btn_primary">点击展现searchBar</a>-->
                        <div class="weui-search-bar" id="searchBar">
                            <form class="weui-search-bar__form">
                                <div class="weui-search-bar__box">
                                    <i class="weui-icon-search"></i>
                                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                                </div>
                                <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                                    <i class="weui-icon-search"></i>
                                    <span>搜索</span>
                                </label>
                            </form>
                            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                        </div>
                        <div class="weui-cells searchbar-result" id="searchResult" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1); display: none;">
                            <div class="weui-cell weui-cell_access">
                                <div class="weui-cell__bd weui-cell_primary">
                                    <p>实时搜索文本</p>
                                </div>
                            </div>
                            <div class="weui-cell weui-cell_access">
                                <div class="weui-cell__bd weui-cell_primary">
                                    <p>实时搜索文本</p>
                                </div>
                            </div>
                            <div class="weui-cell weui-cell_access">
                                <div class="weui-cell__bd weui-cell_primary">
                                    <p>实时搜索文本</p>
                                </div>
                            </div>
                            <div class="weui-cell weui-cell_access">
                                <div class="weui-cell__bd weui-cell_primary">
                                    <p>实时搜索文本</p>
                                </div>
                            </div>
                        </div>
                        <div class="weui-grids">
                            <a href="javascript:;" class="weui-grid">
                                <p class="weui-grid__label">参赛人数</p>
                                <p class="weui-grid__label">100</p>
                            </a>
                            <a href="javascript:;" class="weui-grid">
                                <p class="weui-grid__label">投票人次</p>
                                <p class="weui-grid__label">100</p>
                            </a>
                            <a href="javascript:;" class="weui-grid">
                                <p class="weui-grid__label">访问量</p>
                                <p class="weui-grid__label">100</p>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="weui-panel__bd">
                    <div class="weui-tab">
                        <div class="weui-navbar">
                            <div class="weui-navbar__item weui-bar__item_on" data-page-id="page_1_1">
                                最新参赛
                            </div>
                            <div class="weui-navbar__item" data-page-id="page_1_2">
                                投票排行
                            </div>
                            <div class="weui-navbar__item" data-page-id="page_1_3">
                                TOP10
                            </div>
                        </div>
                        <div class="weui-tab__panel">
                            <div id="page_1_1">
                                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                                    <div class="weui-media-box__hd">
                                        <img class="weui-media-box__thumb" src="" alt="">
                                    </div>
                                    <div class="weui-media-box__bd">
                                        <h4 class="weui-media-box__title">标题一</h4>
                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                                    </div>
                                </a>
                                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                                    <div class="weui-media-box__hd">
                                        <img class="weui-media-box__thumb" src="" alt="">
                                    </div>
                                    <div class="weui-media-box__bd">
                                        <h4 class="weui-media-box__title">标题二</h4>
                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                                    </div>
                                </a>
                                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                                    <div class="weui-media-box__hd">
                                        <img class="weui-media-box__thumb" src="" alt="">
                                    </div>
                                    <div class="weui-media-box__bd">
                                        <h4 class="weui-media-box__title">标题一</h4>
                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                                    </div>
                                </a>
                                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                                    <div class="weui-media-box__hd">
                                        <img class="weui-media-box__thumb" src="" alt="">
                                    </div>
                                    <div class="weui-media-box__bd">
                                        <h4 class="weui-media-box__title">标题二</h4>
                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                                    </div>
                                </a>
                                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                                    <div class="weui-media-box__hd">
                                        <img class="weui-media-box__thumb" src="" alt="">
                                    </div>
                                    <div class="weui-media-box__bd">
                                        <h4 class="weui-media-box__title">标题一</h4>
                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                                    </div>
                                </a>
                                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                                    <div class="weui-media-box__hd">
                                        <img class="weui-media-box__thumb" src="" alt="">
                                    </div>
                                    <div class="weui-media-box__bd">
                                        <h4 class="weui-media-box__title">标题二</h4>
                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                                    </div>
                                </a>
                                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                                    <div class="weui-media-box__hd">
                                        <img class="weui-media-box__thumb" src="" alt="">
                                    </div>
                                    <div class="weui-media-box__bd">
                                        <h4 class="weui-media-box__title">标题一</h4>
                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                                    </div>
                                </a>
                                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                                    <div class="weui-media-box__hd">
                                        <img class="weui-media-box__thumb" src="" alt="">
                                    </div>
                                    <div class="weui-media-box__bd">
                                        <h4 class="weui-media-box__title">标题二</h4>
                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                                    </div>
                                </a>
                                <div class="weui-loadmore">
                                    <i class="weui-loading"></i>
                                    <span class="weui-loadmore__tips">正在加载</span>
                                </div>
                                <div class="weui-loadmore weui-loadmore_line">
                                    <span class="weui-loadmore__tips">暂无数据</span>
                                </div>
                                <div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
                                    <span class="weui-loadmore__tips"></span>
                                </div>
                            </div>
                            <div id="page_1_2">Page 2</div>
                            <div id="page_1_3">Page 3</div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="page_2">
     2
            </div>
            <div id="page_3">
    3
            </div>
            <div id="page_4">
    4
            </div>
            <div id="footer" class="weui-footer">
                <p class="weui-footer__links">
                    <a href="javascript:void(0);" class="weui-footer__link">技术支持</a>
                    <a href="javascript:void(0);" class="weui-footer__link">汇友科技</a>
                </p>
                <p class="weui-footer__text">Copyright © 2015-2017 huiyou365.net</p>
            </div>
        </div>
        <div id="tabbar" class="weui-tabbar">
            <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on" data-page-id="page_1">
                <i class="weui-tabbar__icon fa fa-home"></i>
                <p class="weui-tabbar__label">首页</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item" data-page-id="page_2">
                <i class="weui-tabbar__icon fa fa-user-plus"></i>
                <p class="weui-tabbar__label">排名</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item" data-page-id="page_3">
                <i class="weui-tabbar__icon fa fa-plane"></i>
                <p class="weui-tabbar__label">说明</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item" data-page-id="page_4">
                <i class="weui-tabbar__icon fa fa-trophy"></i>
                <p class="weui-tabbar__label">奖品</p>
            </a>
        </divd>
    </div>
</div>
<script src="http://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" type="application/javascript"></script>
<script src="http://cdn.staticfile.org/zepto/1.0rc1/zepto.min.js" type="application/javascript"></script>
<script>
    $(function(){
        // 底部导航按钮
        $(".weui-tabbar__item").on("click", function(){
            var page_id = $(this).data("page-id");
            $(this).parent().parent().children(".weui-tab__panel").children("div").hide();
            $("#"+page_id).show();
            $(this).siblings().removeClass("weui-bar__item_on");
            $(this).addClass("weui-bar__item_on");
        });

        // 顶部导航按钮
        $(".weui-navbar__item").on("click", function(){
            var page_id = $(this).data("page-id");
            $(this).parent().parent().children(".weui-tab__panel").children("div").hide();
            $("#"+page_id).show();
            $(this).siblings().removeClass("weui-bar__item_on");
            $(this).addClass("weui-bar__item_on");
        });
    });
</script>
<script type="text/javascript" class="searchbar js_show">
    $(function(){
        var $searchBar = $('#searchBar'),
            $searchResult = $('#searchResult'),
            $searchText = $('#searchText'),
            $searchInput = $('#searchInput'),
            $searchClear = $('#searchClear'),
            $searchCancel = $('#searchCancel');

        function hideSearchResult(){
            $searchResult.hide();
            $searchInput.val('');
        }
        function cancelSearch(){
            hideSearchResult();
            $searchBar.removeClass('weui-search-bar_focusing');
            $searchText.show();
        }

        $searchText.on('click', function(){
            $searchBar.addClass('weui-search-bar_focusing');
            $searchInput.focus();
        });
        $searchInput
            .on('blur', function () {
                if(!this.value.length) cancelSearch();
            })
            .on('input', function(){
                if(this.value.length) {
                    $searchResult.show();
                } else {
                    $searchResult.hide();
                }
            })
        ;
        $searchClear.on('click', function(){
            hideSearchResult();
            $searchInput.focus();
        });
        $searchCancel.on('click', function(){
            cancelSearch();
            $searchInput.blur();
        });
    });</script>
</body>
</html>